<template>
  <view class="desc_wrap" v-show="coursesList != null">
    <view class="course_wrap">
      <!--标题-->
      <view class="course_name">
        <text>{{coursesList.name}}</text>
      </view>

      <!-- 详细 -->
      <view class="course_detail">
        <view class="course_name">用户名字</view>
        <view class="course_like">
          <text>{{likeCount}}个点赞</text>
        </view>
        <view class="course_time">*{{coursesList.cnTime}}</view>
      </view>

      <view class="course_desc">{{coursesList.desc}}</view>

      <view class="landc_wrap">
        <view :class="[isLike ? 'img_like_active' : 'img_like']" @click="handLike">
          <!-- <uni-icons type="hand-thumbsup"  size="24"></uni-icons> {{likeCount}} -->
          <text class="iconfont icondianzan">{{likeCount}}</text>
        </view>
        <view :class="[isFollow ? 'img_collection_active' : 'img_collection']" @click="handFollow">
          <view v-show="isFollow">
            <text class="iconfont iconshoucang">已关注</text>
          </view>
          <view v-show="!isFollow">
            <text class="iconfont iconshoucang">关注</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 点赞和关注 -->

    <!--上部分结束-->
    <!--空白条开始——这部分不可以删除 -->
    <view style="margin-top: 50upx;"></view>
    <!--空白条结束——这部分不可以删除 -->
    <!--下部分开始 -->
    <!--视频开始 -->
    <view v-if="coursesList.iscourses">
      <view v-for="(item,index) in coursesList.videosList" :key="index">
        <view class="nav-list video_wrap">
          <!--视频封面开始 -->
          <view
            hover-class="none"
            url
            class="nav-li bg-img shadow"
            navigateTo
            style="background-image:url(../../static/cover/cover-02.jpg);"
          >
            <text class="cuIcon-playfill text-white" style="justify-content: center;"></text>
          </view>
          <!--视频封面结束 -->
          <view class="side">
            <text class="title">{{item.title}}</text>
            <text class="desc">{{item.desc}}</text>
          </view>
        </view>
      </view>
    </view>
    <view v-else>
      <!-- 未拥有课程 -->
      抱歉!你未拥有课程不能查看视频!
    </view>
    <!--视频结束 -->

    <!--空白条开始——这部分不可以删除 -->
    <view class="cu-tabbar-height"></view>
    <!--空白条结束——这部分不可以删除 -->
    <!--价格框开始-->
    <view class="cu-bar foot bg-grey" style="justify-content:center;" v-if="coursesList.iscourses">
      <text class="text-xxl" style="margin-left: 10upx;" @click="toClass">你已拥有课程!点击查看分班</text>
    </view>
    <view class="cu-bar foot bg-red" style="justify-content:center;" v-else>
      <text class="text-price text-xl"></text>
      <text
        class="text-xxl"
        style="margin-left: 10upx;"
        @click="toPayCourse"
      >{{coursesList.price}} 立即购买!</text>
    </view>
    <!--价格框结束-->
    <!--下部分结束 -->
  </view>
</template>

<script>
import moment from "moment";
moment.locale("zh-cn");
import {uniIcons} from "@dcloudio/uni-ui";
export default {
  components: { uniIcons },
  data() {
    return {
      isLike: false,
      likeCount: 0,
      isFollow: false,
      coursesList: {},
      first: false
    };
  },
  props: {
    myId: Number
  },
  watch: {
    myId() {
      console.log("watch id...");
      //this.getCourse();
    }
  },
  mounted() {
    this.getCourse();
  },
  methods: {
    handFollow() {
      this.isFollow = !this.isFollow;
      var status;
      if (this.isFollow == true) {
        //未关注=>关注了
        status = 1;
      } else {
        //关注=>未关注
        status = 2;
      }
      this.request({
        url: this.apiServer + "/follow/doCoursesFollow",
        method: "POST",
        header: {
          "Content-Type": "application/x-www-form-urlencoded"
        },
        data: {
          pId: this.coursesList.id,
          uId: uni.getStorageSync("user").id,
          status: status
        }
      }).then(res => {
        console.log(res);
      });
    },
    handLike() {
      if (this.isLike == false) {
        this.likeCount++;
      } else {
        this.likeCount--;
      }
      this.isLike = !this.isLike;
      //判断
      var status;
      if (this.isLike == true) {
        //未点赞=>点赞
        status = 1;
      } else {
        //点赞=>未点赞
        status = 2;
      }
      this.request({
        url: this.apiServer + "/like/doCoursesLike",
        method: "POST",
        header: {
          "Content-Type": "application/x-www-form-urlencoded"
        },
        data: {
          pId: this.coursesList.id,
          uId: uni.getStorageSync("user").id,
          status: status
        }
      }).then(res => {
        console.log(res);
      });
    },
    getCourse() {
      this.request({
        url:
          this.apiServer +
          "/courses/findCourseByIdAndUId?id=" +
          this.myId +
          "&uId=" +
          uni.getStorageSync("user").id
      }).then(res => {
        this.coursesList = res.data;
        this.isLike = res.data.islike;
        this.isFollow = res.data.isfollow;
        this.likeCount = res.data.like;
        this.coursesList.cnTime = moment(res.data.createTime).format(
          "YYYY-MM-DD"
        );
        console.log(res);
      });
    },
    toPayCourse() {
      console.log("toPayCourse");
      uni.navigateTo({
        url: `/pages/payment/index?cId=${this.coursesList.id}`
      });
    },
    toClass() {
      uni.switchTab({
        url:"/pages/class/index"
      })
    }
  },
  beforeDestroy() {
    console.log("beforeDestroy");
    //console.log(this.coursesList.id);
  }
};
</script>

<style lang="scss" scoped>
.desc_wrap {
  .course_wrap {
    padding-top: 10rpx;
    border-bottom: #ccc 5rpx solid;

    .course_name {
      padding-left: 10rpx;
      font-size: 40rpx;
      color: #000;
      font-weight: 700;
      overflow: hidden;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }

    .course_detail {
      display: flex;
      margin-bottom: 10rpx;
      padding-left: 5rpx;
      .course_name {
        color: #000;
        font-size: 30rpx;
        padding: 10rpx;
        border-left: 7rpx solid $color-theme;
      }
      .course_like {
        padding: 10rpx;
        font-size: 28rpx;
        color: orange;
        text {
        }
      }
      .course_time {
        color: #ccc;
        font-size: 28rpx;
        padding: 10rpx;
      }
    }
    .course_desc {
      color: #ccc;
      display: flex;
      flex-wrap: wrap;
      // justify-content: center;
      align-items: center;
      padding-bottom: 10rpx;
      padding-left: 5rpx;
    }
    .landc_wrap {
      display: flex;
      justify-content: space-between;
      //border-bottom: 1px solid #ccc;
      padding: 0 20rpx;
      padding-bottom: 10rpx;
      height: 60rpx;
      .img_like {
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 1;
      }
      .img_like_active {
        color: orange;
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 1;
      }
      .img_collection {
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 1;
      }
      .img_collection_active {
        color: orange;
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 1;
      }
    }
  }
  .video_wrap {
    border-bottom: #ccc solid 3rpx;
    padding-top: 10rpx;
  }
}

//=---------------------------
.side {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  margin-left: 10px;
  height: 82px;
}

.title {
  width: 172px;
  height: 42px;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 21px;
  white-space: pre-wrap;
  color: #131f3c;
  font-family: Helvetica;
  font-size: 15px;
}

.desc {
  opacity: 0.9;
  margin-top: 25px;
  line-height: 14px;
  white-space: pre;
  color: #000000;
  font-family: Helvetica;
  font-size: 12px;
}
.nav-list {
  display: flex;
  flex-wrap: wrap;
  padding: 0px 0upx 0px;
}

.nav-li {
  padding: 30upx;
  border-radius: 12upx;
  width: 45%;
  height: 200upx;
  margin: 0 2.5% 40upx;
  background-size: cover;
  background-position: center;
  position: relative;
  z-index: 1;
}
.nav-li text {
  position: absolute;
  right: 40%;
  top: 40%;
  font-size: 80upx;
  width: 60upx;
  height: 60upx;
  text-align: center;
  line-height: 60upx;
}

.text-light {
  font-weight: 300;
}
</style>